<script setup lang="ts">
  //   import { useRouter } from 'vue-router';
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import useModeModalHandler from '@/hooks/arco/useModeModalHandler';
  import { queryDrugList } from '@/api/medication-management/drug-information';

  import edit from './edit.vue';

  //   const router = useRouter();

  const columns = [
    {
      title: '药品ID',
      dataIndex: 'drugId',
    },
    {
      title: '药品名称',
      dataIndex: 'drugName',
    },
    {
      title: '药品规格',
      dataIndex: 'specifications',
    },
    {
      title: '药品类型',
      dataIndex: 'drugTypeLabel',
    },
    {
      title: '生产厂家',
      dataIndex: 'companyName',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      align: 'center' as const,
      dataIndex: 'action',
      slotName: 'action',
    },
  ];

  const page = usePageTable({
    searchForm: {
      state: {
        drugName: '',
        companyName: '',
        drugType: '',
      },
    },
    table: {
      apiFun: queryDrugList,
      columns,
    },
  });

  const editModal = useModeModalHandler({
    onSuccess() {
      page.reload();
    },
  });

  const showDetail = (record: any) => {
    editModal.showDetail(record);
  };
</script>

<template>
  <div class="col">
    <edit v-bind="editModal.bindProps" />
    <TableLayout v-bind="page.bindProps" @create="editModal.showAdd()">
      <template #searchForm="{ state }">
        <a-form-item field="drugName" label="药品名称" label-col-flex="60px">
          <a-input
            v-model="state.drugName"
            placeholder="请输入药品名称"
            allow-clear
          />
        </a-form-item>

        <a-form-item field="companyName" label="生产厂家" label-col-flex="60px">
          <a-input
            v-model="state.companyName"
            placeholder="请输入生产厂家"
            allow-clear
          />
        </a-form-item>

        <a-form-item field="drugType" label="药品类型" label-col-flex="60px">
          <dict-select
            v-model="state.drugType"
            type="DrugType"
            allow-clear
            placeholder="请选择药品类型"
          />
        </a-form-item>
      </template>

      <template #action="{ record }">
        <a-space>
          <ae-button purpose="view" @click="showDetail(record)">
            详情
          </ae-button>
        </a-space>
      </template>
    </TableLayout>
  </div>
</template>

<style lang="less" scoped></style>
